<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关于我们</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/partner.css">
    <!-- jqueryCDN -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/reset.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>

<body>
    <!-- 顶部导航栏start -->
    <div class="top clearfix">
        <div class="container clearfix">
            <h1 class="logo-wrap inline-block">
                <a href="">
                    <img src="./imgs/logo.png" class="logo" alt="">
                </a>
            </h1>
            <ul class="ul inline-block">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./company.html">公司动态</a>
                </li>
                <li>
                    <a href="./product_new.html">产品动态</a>
                </li>
                <li>
                    <a href="./product_show.html">产品展示</a>
                </li>
                <li class="active">
                    <a href="./partner.html">合作案例</a>
                </li>
                <li>
                    <a href="./download.html">下载中心</a>
                </li>
                <li>
                    <a href="./download.html">在线学习</a>
                </li>
                <li>
                    <a href="./about_us.html">关于我们</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶部导航栏end -->
    <!-- banner -->
    <div class="banner container-fluid">
        <img src="./imgs/partner/banner.png" alt="">
        <div class="bgcor container-fluid"></div>
        <div class="position container">
            <div class="position-info">
                <img src="./imgs/company/home.png" alt="">
                <span>当前位置：首页 > 合作案例</span>
            </div>
        </div>
    </div>
    <!-- content -->
    <div class="content container">
        <img src="./imgs/partner/hzal.png" class="page-title" alt="">
        <div class="lunbo container">
            <img src="./imgs/partner/left.png" class="handle-icon left" id="left" alt="">
            <img src="./imgs/partner/right.png" class="handle-icon right" id="right" alt="">           
            <div class="partner-list">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部 -->
    <div class="links">
        <div class="container">
            <div class="link-header">
                <ul>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">公司动态</a>
                    </li>
                    <li>
                        <a href="">产品动态</a>
                    </li>
                    <li>
                        <a href="">产品展示</a>
                    </li>
                    <li>
                        <a href="">合作案例</a>
                    </li>
                    <li>
                        <a href="">下载中心</a>
                    </li>
                    <li>
                        <a href="">在线学习</a>
                    </li>
                    <li>
                        <a href="">关于我们</a>
                    </li>
                </ul>
            </div>
            <div class="hr"></div>
            <div class="link-info">
                <div class="info">电话：13966788690</div>
                <div class="info">邮箱：553518846@qq.com</div>
                <div class="info">地址：合肥市滨湖新区万达城亲湖苑6号楼1402室</div>
                <div class="qrcode">
                    <p>扫一扫</p>
                    <p>关注我们</p>
                    <img src="./imgs/qrcode.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="copyright">Copyright&nbsp;&nbsp;&nbsp;易投软件网&nbsp;&nbsp;&nbsp;豫IP备19032028号</div>
    <script>  
        $(document).ready(function() {
            var curentPage = 0;
            var currentDom = null;
            var mySwiper = new Swiper ('.swiper-container', {
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
        
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.right',
                    prevEl: '.left',
                },
                on: {
                    slideChange: function(){
                        // 当前页数
                        curentPage = this.activeIndex
        
                        currentDom = this.slides[this.activeIndex]
                    },
                },
            });


            var imgList = []
            var data = {}
            // 模拟接口返回数据
            setTimeout(() => {
                data = {
                        "list": [{
                            "image": "\/uploads\/20220102\/edc398b03efb8fef8c9c7e8b6aab5db2.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220102\/d1223ada773fe662a8b0c27c5e20d46c.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220102\/076ed32915819c02b594b8227f07eb5b.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220102\/d4f8de327aa9275da989fda129054713.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/44fc4cce5acc458bd49a0ef1a087eb90.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/e3fe8972e59c9facc34537d414b4f833.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/214dbe4303c8c97812f4d81221111c94.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/7c9f953d532b6c6bef59dc49cad81968.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/88de201bf389c3306ed0aac2fd3d0b13.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/276053a16175ab25e180f6b1554f1fe0.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/d0e21f8457dddb16bd81888675eb3180.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/3fc223cdd31afeaf0c62944ab7a0cfbe.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220111\/e20a8ab664fbf81c1b6ce73983e45978.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220111\/df1f01ddce107ab569667a0274ad5deb.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220102\/fb649f2fdb965679900ca5e3ed04f17a.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220121\/e2520594ea956bb582c0e776561cce85.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220121\/d7868a36ed2a58a6ae2b324275996429.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220121\/7de724417dca1fdccfd1432c72f488b6.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220121\/0a6cdf4786027f8018bfd853121c6c11.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220121\/be22976dc0eceedf2930ff33c9afdf47.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220121\/6baa6f3da3faeca29699bccaa8d771e8.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220121\/108b752ecda3a23a66d6cc5ad7f0d123.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/0b37cd1eb70a78ebe38f64ecca64552d.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/c10920302a00a1c26861875da1b34ec4.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/806f66f38e8cd2f4757bc4f84530f049.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/9655cd999b3f560695aa46938f7c7c47.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/82e1d5b3922ae9d75ce3666163d410d8.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/7c73b6d9e15633e521e2ce7a87fa8795.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/97da156e12d337565241b6e14cc969fd.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/a900cfa0519775eda5e7a37bb31bc5f3.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/993dc984853c2a84372f5e849e15c6c2.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/37f726648b3e412f9e9d01d99b2a136d.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/280d9fd93fceb3aeb3bb09a232fc0263.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/070e975fb6ddad6d97705e1313d3c122.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/5a6cb99b44c2be2b65e1888639414318.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220102\/9b285c86c99c34f5e26988790cc41b85.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220102\/c9daa4bfd6453243d0c4b32488aef6bf.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220102\/c37bbbb00c2096812d1c77e743dfad00.png",
                            "status_text": ""
                        },
                        {
                            "image": "\/uploads\/20220110\/432e4a37f5e8fcdfeed510415ddaea86.png",
                            "status_text": ""
                        }]
                    }
                var temArr = chunk(data.list, 16);
                imgList = chunk(data.list, 16);
                for(var k = 0; k < temArr.length; k++) {
                    $(".swiper-wrapper").get(0).innerHTML += `<div class="swiper-slide"></div>`
                }
                
        
                // 渲染元素到Dom
                function renderDom(curentPage, temArr) {
                    if(temArr.length == 0) return;
                    var imgStr = ''
                    for(var j = 0 ; j < temArr[curentPage].length; j++) {
                        imgStr += `<img src='${temArr[curentPage][j].image}'>`
                    }
                    $(".swiper-slide").get(curentPage).innerHTML = imgStr
                }
                // 首页数据展示
                renderDom(0, temArr)
                $('#left').on('click', function() {
                    console.log(curentPage)
                    renderDom(curentPage, imgList)
                })
                $('#right').on('click', function() {
                    console.log(curentPage)
                    renderDom(curentPage, imgList)
                })
            }, 5000);
        })



        //JS根据长度切割数组
        function chunk(array, size) {
            //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
            const length = array.length
            //判断不是数组，或者size没有设置，size小于1，就返回空数组
            if (!length || !size || size < 1) {
                return []
            }
            //核心部分
            let index = 0 //用来表示切割元素的范围start
            let resIndex = 0 //用来递增表示输出数组的下标

            //根据length和size算出输出数组的长度，并且创建它。
            let result = new Array(Math.ceil(length / size))
            //进行循环
            while (index < length) {
                //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
                result[resIndex++] = array.slice(index, (index += size))
            }
            //输出新数组
            return result
        }
    </script>
</body>

</html>